<script setup lang="ts">
import {useCarStore} from "@/store/car";
import {useCommonStore} from "@/store/common";
import {ref} from "vue";

const carStore = useCarStore()
const commonStore = useCommonStore()

const list = ref({})
list.value = carStore.carItems
const change = () => {
  carStore.allChecked = !carStore.allChecked
  carStore.checkAll(carStore.allChecked)
}
const submitOrder = () => {
  commonStore.goodsItem = []
  commonStore.goodsItem = carStore.carItems.filter((item) => item.checked == true)
  if (commonStore.goodsItem.length === 0) {
    uni.showToast({
      title: '请选择商品',
      icon: 'none'
    })
    return
  }
  //跳转到确认订单页面
  uni.navigateTo({
    url: '/pages/user/order/orderCreate/orderCreate?type=1'
  })
}
const options = [{
  text: '删除',
  style: {
    backgroundColor: '#f56c6c'
  }
}]

const totalPrice = ref<any>(0)
totalPrice.value = carStore.totalPriceFn()
const deleteItem = (id: any) => {
  carStore.deleteCar(id)
}

</script>

<template>
  <view class="bar"></view>

  <view class="container" v-if="list.length > 0">
    <u-swipe-action>
      <u-swipe-action-item
          style="margin: 10rpx;border-radius: 15rpx"
          v-for="(item,index) in list"
          @click="deleteItem(item.id)"
          :options="options"
      >
        <carItem :item="item" :index="index"></carItem>
      </u-swipe-action-item>
    </u-swipe-action>
    <view style="height: 100rpx"></view>
    <view class="car-bottom">
      <u-checkbox-group>
        <u-checkbox
            style="margin-left: 25rpx"
            shape="circle"
            label="全选"
            activeColor="#FF9E29"
            :checked="carStore.allChecked"
            @change="change()"
        ></u-checkbox>
      </u-checkbox-group>
      <view class="car-bottom-right">
        <view style="display: flex;align-items: center;">
          合计：
          <view style="color: #FF9E29">
            <text>￥</text>
            <text style="font-size: 40rpx;font-weight: 700">{{ carStore.totalPriceFn() }}</text>
          </view>
        </view>
        <u-button text="去结算" style="width: 200rpx;height: 80rpx;margin-left: 20rpx" shape="circle"
                  color="#FF9E29" @click="submitOrder()"></u-button>
      </view>
    </view>
  </view>
  <u-empty
      v-else
      mode="car"
      icon="http://cdn.uviewui.com/uview/empty/car.png"
  >
  </u-empty>
</template>

<style scoped lang="scss">
.container {
  padding-top: 15rpx;
  display: block;
  background: rgba(241, 240, 240, 0.71);
  height: 100%;
}

.car-bottom {
  position: fixed;
  //底部导航栏安全距离
  bottom: env(safe-area-inset-bottom);
  //bottom: 200rpx;
  width: 100%;
  height: 100rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10rpx;
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.35) 0rpx 5rpx 15rpx;
  z-index: 10;
}

.car-bottom-right {
  justify-content: center;
  display: flex;
  align-items: center;
  line-height: 80rpx;
}
</style>
